<template>
  <flexbox style="background-color:#35495E">
    <flexbox-item :span="5">
      <div class="headerIcon">
        <img :src="headIcon">
      </div>
    </flexbox-item>
    <flexbox-item :span="7">
      <div class="headerParam">
        <p>昵称：{{nickName}}</p>
        <!-- <p>机构：{{agencyName}}</p> -->
      </div>
    </flexbox-item>
  </flexbox>
</template>pdiv
<script>
import { Flexbox, FlexboxItem } from 'vux'
export default {
  name: 'TheUserHeader',
  components: {
    Flexbox,
    FlexboxItem
  },
  data () {
    return {
    }
  },
  props: ['params'],
  computed: {
    nickName: function () {
      if (this.params.nickName) {
        return this.params.nickName
      } else {
        return '未获取'
      }
    },
    agencyName: function () {
      if (this.params.agencyName) {
        return this.params.agencyName
      } else {
        return '未设置'
      }
    },
    headIcon: function () {
      if (this.params.headIcon) {
        return this.params.headIcon
      } else {
        return '/front/static/images/user_green.png'
      }
    }

  }
}
</script>
<style>
.headerIcon {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 18px;
}
.headerIcon img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #c2c5c9;
}
.headerParam{
  text-align: left;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #FFF;
  font-size: 14px;
}
</style>